<template>
  <div class="order">
    <mt-header title="废品下单">
      <div slot="left">
        <mt-button icon="back" @click="back">返回</mt-button>
      </div>
    </mt-header>
    <div class="main">
      <div class="menu">
        <button class="menu-btn" @click="changeTypeId">
          <mt-cell title="废旧金属" isLink></mt-cell>
        </button>
        <button class="menu-btn" @click="changeTypeId">
          <mt-cell title="废电器" is-link></mt-cell>
        </button>
        <button class="menu-btn" @click="changeTypeId">
          <mt-cell title="废纸" is-link></mt-cell>
        </button>
      </div>
      <div class="pic">
        <img slot="icon" src="../../assets/img/good.jpg">
        <img slot="icon" src="../../assets/img/good.jpg">
        <img slot="icon" src="../../assets/img/good.jpg">
      </div>
      <div class="detail">
        <order-component :typeId="type_id" @countPrice="allPrice"></order-component>
      </div>
      <footer class="page-footer">
        <mt-tabbar v-model="selected">
          <mt-tab-item>
            <img src="../../assets/img/cart.png">
          </mt-tab-item>
          <mt-tab-item>￥1000</mt-tab-item>
          <mt-tab-item @click="submit_order">提交订单</mt-tab-item>
        </mt-tabbar>
      </footer>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {Toast} from 'mint-ui'
  import OrderComponent from '~/components/OrderComponent.vue'

  export default {
    data(){
      return{
        num:2,
        type_id:1
      }
    },
    components:{OrderComponent},
    methods:{
      submit_order(){
        Toast({
          message: '提交成功',
          duration: 1500
        });
        // /*
        // *** 用户提交订单接口
        // **/
        // let paramSubmit_Order = new URLSearchParams();
        // paramSubmit_Order.append("order_info", "废纸#10,废电器#5");
        // paramSubmit_Order.append("user_id", "5");
        // paramSubmit_Order.append("order_id", "10");
        // paramSubmit_Order.append("order_time", "2018-04-15 15:00:00");
        //
        // axios.post('http://yaobeier.cn:8080/RR_Consumer/user/submit_order', paramSubmit_Order).then(function(response){
        //   console.log(response);
        // }).catch(function (error){
        //   console.log(error);
        // });
      },
      back(){
        this.$router.go(-1)
      },
      changeTypeId(){
        this.type_id=2;
      },
      allPrice(price){
        console.log(price)
      }
    }
  }
</script>

<style scoped>
  .order {
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .menu {
    position: absolute;
    left: 0;
    width: 30%;
    height: 100%;
  }

  .menu-btn{
    width: 100%;
    border: 0px;
    padding: 0px;
    outline: none;
  }

  .pic {
    position: absolute;
    left: 30%;
    width: 20%;
    height: 100%;
  }

  .pic img{
    width: 60px;
    height: 60px;
    margin-top: 10px;
    margin-left: 10px;
  }

  .detail {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
  }

  .waste {
    height: 60px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .plus {
    height: 40px;
    width: 40px;
    color: #f7f8fb;
    margin-top: 10px;
  }

  .page-footer {
    width: 100%;
    height: 10%;
    background-color: #efedef;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .page-footer img {
    width: 40px;
    height: 40px;
  }

  .info {
    width: 100%;
  }
  .info img {
    width: 30px;
    height: 30px;
  }

</style>
